import React from 'react'

// icon
import FireIcon from '../../res/images/web/shared/fire.png'
import './GameCard.css'

const GameCard = props => {
    const {
        game:{
            imageUrl,
            title,
            source,
        },
    } = props

    const imgContainer = {
        backgroundImage: `url(${imageUrl})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: '50% 50%',
    }

    return (
        <div className='game-card'>
            <div
                className='game-card-img'
                style={imgContainer}
            >
                <p className='game-card-title'>
                    {title}
                </p>
            </div>
            <div className='game-card-sub'>
                <p>{source}</p>
                <div>
                    <img src={FireIcon} alt=''/>
                    <p>2.4W</p>
                </div>
            </div>
        </div>
    )
}

export default GameCard
